<script setup>
import { onMounted, ref } from 'vue'
import { useOpenId } from '@/utils/useOpenId'
import { getNoticePopup } from '@/api/index'

const isShowPopup = ref(false)
const noticePopup = ref({})
async function onGetNoticePopup() {
  const { result } = await getNoticePopup(useOpenId())
  if (result) {
    noticePopup.value = result
    isShowPopup.value = true
  }
}

function goNoticeDetail() {
  isShowPopup.value = false
  uni.navigateTo({ url: `/pages/index/view/notice-detail?id=${noticePopup.value.id}` })
}

onMounted(() => {
  onGetNoticePopup()
})
</script>

<template>
  <nut-overlay v-model:visible="isShowPopup" :close-on-click-overlay="false">
    <view class="center h-full">
      <view class="px-3 py-5 bg-white rounded flex flex-col relative w-80% justify-center">
        <h4 class="mb-2 font-semibold text-center">
          {{ noticePopup.title }}
        </h4>
        <p class="mb-3 text-28 text-[#666] truncate">
          {{ noticePopup.remark }}
        </p>
        <nut-config-provider :theme-vars="{ 'button-border-width': '0px' }">
          <view class="rounded flex overflow-hidden">
            <view class="w-full">
              <nut-button block shape="square" custom-color="#FFA44B" @click.stop="goNoticeDetail">
                查看
              </nut-button>
            </view>
          </view>
        </nut-config-provider>
        <view class="text-white absolute left-50% -bottom-120" style="transform: translateX(-50%)">
          <nut-icon name="circle-close" size="20" @click.stop="isShowPopup = false" />
        </view>
      </view>
    </view>
  </nut-overlay>
</template>
